:root {
  --page-hold-color: #42b983;
  --page-hold-bg-color: rgba(66, 185, 131, .05);

  --page-bg-color: #f5f5f5;
  --page-txt-color: #333;
  --page-info-color: #aaa;
  
  --header-bg-color: rgba(255, 255, 255, .8);
  --scroll-bar-color: #fff;
  --scroll-thumb-color: #aaa; 

  --article-line-color: #ddd;
  --table-header-bg: #ddd;
  --table-even-bg: #eee;
  --article-blockquote-color: #42b983;
  --article-blockquote-bg: rgba(66, 185, 130, .1);
  --blockquote-code: #fff;

  --code-pre-bg: #fff;
  --code-inline-bg: rgba(255, 255, 255, .85);
  --code-inline-txt: #ff5722;
  --code-txt-color: #333;
  --code-lang-color: rgba(0, 0, 0, .3);
  --code-token-tag: #905;
  --code-token-value: #07a;
  --code-token-name: #690;
  --code-token-function: #DD4A68;

  --codebox-bg: #fff;
  --codebox-border: #ddd;
  --codebox-footer-bg: rgba(255, 255, 255, 0.8);
  --codebox-hover-shadow: rgba(0, 0, 0, 0.15);
}

html.dark {
  --page-hold-color: #42b983;
  --page-hold-bg-color: rgba(208, 208, 208, .15);

  --page-bg-color: #222;
  --page-txt-color: #f5f5f5;
  --page-info-color: #777;
  
  --header-bg-color: rgba(60, 60, 60, .8);
  --scroll-bar-color: #222;
  --scroll-thumb-color: #666; 
  
  --article-line-color: #666;
  --table-header-bg: #303030;
  --table-even-bg: #1b1b1b;

  --article-blockquote-bg: rgba(208, 208, 208, .15);
  --blockquote-code: #222;

  --code-pre-bg: rgba(208, 208, 208, .15);
  --code-inline-bg: rgb(55, 55, 55);
  --code-inline-txt: #ff9800;
  --code-txt-color: #ddd;
  --code-lang-color: rgba(255, 255, 255, 0.3);
  --code-token-tag: #ff008e;
  --code-token-value: rgb(0, 179, 255);
  --code-token-name: #8bc34a;
  --code-token-function: #f44336;

  --codebox-bg: #000;
  --codebox-border: #373737;
  --codebox-footer-bg: rgba(34, 34, 34, .8);
  --codebox-hover-shadow: rgba(0, 0, 0, 1);
}

html {
	scroll-behavior: smooth;
  overflow-x: hidden;
}

body {
  width: 100vw;
  overscroll-behavior: none;
  background-color: var(--page-bg-color);
  transition: background .3s ease-in-out;
  will-change: background;
}

:target:before {
	content: "";
	display: block;
	height: 80px;
	margin: -80px 0 0;
}
